<template>
  <el-container class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header height="60px">
      <div class="header-container">
        <div class="logo">荷包蛋</div>
        <div class="header-right">
          <!-- <el-button link @click="isCollapse = !isCollapse">
						<el-icon color="#fff" size="24">
							<i-ep-Expand v-if="isCollapse" />
							<i-ep-Fold v-else />
						</el-icon>
					</el-button> -->
          <div class="menu-box">
            <el-menu :collapse="isCollapse" default-active="1" class="menu-vertical" background-color="#545c64"
              mode="horizontal" text-color="#fff" active-text-color="#ffd04b">
              <el-menu-item index="1" @click="router.push('/store/dashboard')">
                首页
              </el-menu-item>
              <el-menu-item index="2-1" @click="router.push('/store/product/search')">商品搜索</el-menu-item>
              <el-menu-item index="2-2" @click="router.push('/store/product')">商品列表</el-menu-item>
              <el-menu-item index="2-3" @click="router.push('/store/product/history')">操作历史</el-menu-item>
            </el-menu>
          </div>
          <el-dropdown>
            <span class="user-info">
              管理员 <el-icon><i-ep-ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="userInfoDialog = true">个人信息</el-dropdown-item>
                <el-dropdown-item @click="logoutHandler">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <el-container>
      <!-- 左侧菜单栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'" v-if="false">
        <el-menu :collapse="isCollapse" default-active="1" class="menu-vertical" background-color="#545c64"
          text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="1" @click="router.push('/store/dashboard')">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Document />
              </el-icon>
              <span>品管理</span>
            </template>
            <el-menu-item index="2-1" @click="router.push('/store/product/search')">商品搜索</el-menu-item>
            <el-menu-item index="2-2" @click="router.push('/store/product')">商品列表</el-menu-item>
            <el-menu-item index="2-3" @click="router.push('/store/product/history')">操作历史</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 右侧内容区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

  <!-- Start Generation Here -->
  <el-dialog title="个人信息" v-model="userInfoDialog" width="50%">
    <el-descriptions :border="true" :column="2">
      <el-descriptions-item label="用户名">{{
        store.state.user.username
      }}</el-descriptions-item>
      <el-descriptions-item label="昵称">{{
        store.state.user.nickname
      }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{
        store.state.user.email
      }}</el-descriptions-item>
      <el-descriptions-item label="电话">{{
        store.state.user.phone
      }}</el-descriptions-item>
      <el-descriptions-item label="最后登录时间">{{
        store.state.user.lastLoginTime
      }}</el-descriptions-item>
      <el-descriptions-item label="最后登录IP">{{
        store.state.user.lastLoginIp
      }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="userInfoDialog = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { CaretBottom, HomeFilled, Document } from '@element-plus/icons-vue'

const store = useStore()
const router = useRouter()
const isCollapse = ref(true)
const userInfoDialog = ref(false)

onMounted(() => {
  const user = store.state.user
  if (!user.login) {
    router.push('/login')
    ElMessage.error('请先登录')
  }
})

const logoutHandler = () => {
  localStorage.removeItem('token')
  store.commit('setLogin', false)
  router.push('/login')
  ElMessage.success('退出登录成功')
}
</script>

<style scoped lang="less">
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.el-header {
  padding: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-container {
  height: 60px;
  gap: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-right {
  flex: 1;
  height: 100%;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.menu-box {
  flex: 1;
  height: 100%;

  .el-menu {
    width: 100%;
  }

  ::v-deep .el-menu--horizontal.el-menu {
    border: none;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.1);
}

.el-container {
  flex: 1;
  overflow: hidden;
}

.el-aside {
  /* width: auto; */
  height: 100%;
  overflow: hidden;
  transition: width 0.3s;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

.menu-vertical {
  height: 100%;
  border-right: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.menu-vertical::-webkit-scrollbar {
  width: 6px;
}

.menu-vertical::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.menu-vertical::-webkit-scrollbar-track {
  background: transparent;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

:deep(.el-menu) {
  background: transparent !important;
  border-right: none;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  color: #fff !important;
  background: transparent !important;
}

:deep(.el-menu-item.is-active) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background: rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-sub-menu) {
  background: transparent !important;
}

/* 自定义滚动条样式 */
.el-aside::-webkit-scrollbar,
.el-main::-webkit-scrollbar {
  width: 6px;
}

.el-aside::-webkit-scrollbar-thumb,
.el-main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.el-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}

.el-aside::-webkit-scrollbar-track,
.el-main::-webkit-scrollbar-track {
  background: transparent;
}
</style>
